<template>
    <div class="h100" ref="map">
        <RenderTip />
    </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import fourColor from "./data";
import RenderTip from "./component/RenderTip";
export default {
    name: "FourColorGraph",
    components: {
        RenderTip,
    },
    props: {},
    data() {
        return {};
    },
    mounted() {
        const map = L.map(this.$refs.map, {
            center: [25.03136157989502, 117.07213640213013],
            zoom: 15,
            crs: L.CRS.EPSG4326,
            maxZoom: 15,
            minZoom: 12,
        });
        const layer = L.tileLayer(
            `http://124.70.129.134:8216/data/tiles/weikuang_2/{z}/{x}/{y}.jpg`,
            { tms: true },
        );
        layer.addTo(map);

        fourColor.polygons.forEach((item) => {
            L.polygon(item.points, item.style).addTo(map);
        });

        L.polyline(fourColor.polyline.points, fourColor.polyline.style).addTo(map);
    },
};
</script>

<style lang="scss" scoped></style>
